- has_errors = @webauthn_error || @webauthn_registration.errors.present?

= render ::Layouts::CrudComponent.new(_('WebAuthn devices'),
  icon: 'lock',
  count: @registrations.length,
  description: _('Set up a WebAuthn device to enable two-factor authentication (2FA).'),
  form_options: { class: has_errors ? '' : 'gl-hidden js-toggle-content' },
  options: { class: 'gl-mt-5 js-toggle-container js-token-card' }) do |c|
  - c.with_actions do
    = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'register-webauthn-button' } }) do
      = _('Register device')
  - c.with_form do
    - if @webauthn_registration.errors.present?
      = form_errors(@webauthn_registration)
    #js-device-registration{ data: device_registration_data(current_password_required: current_password_required?, target_path: create_webauthn_profile_two_factor_auth_path, webauthn_error: @webauthn_error) }
  - c.with_body do
    - if @registrations.present?
      .table-responsive
        %table.table.gl-table
          %colgroup
            %col{ width: "50%" }
            %col{ width: "30%" }
            %col{ width: "20%" }
          %thead
            %tr
              %th= _('Name')
              %th= s_('2FADevice|Registered on')
              %th
          %tbody
            - @registrations.each do |registration|
              %tr
                %td
                  - if registration[:name].present?
                    = registration[:name]
                  - else
                    %span.gl-text-subtle
                      = _("no name set")
                %td= registration[:created_at].to_date.to_fs(:medium)
                %td{ class: '!gl-py-3' }
                  .gl-float-right
                    .js-two-factor-action-confirm{ data: delete_webauthn_device_data(current_password_required?, registration[:delete_path]) }
    - else
      = _("Not all browsers support WebAuthn. You must save your recovery codes after you first register a two-factor authenticator to be able to sign in.")
